<script setup>
defineOptions({ name: 'ArticleChannel' })
import CartPage from '@/components/CardPage.vue'
import { channelCateService, channelDeleteCateService } from '@/api/channel'
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import ChannelDialog from './components/ChannelDialog.vue'
import { ElMessage } from 'element-plus'
// 获取文章列表
// 加载提示
const loading = ref(true)
const channelList = ref([])
const getChannelList = async () => {
  loading.value = true
  const res = await channelCateService()
  channelList.value = res.data
  // console.log(channelList.value)
  loading.value = false
}
getChannelList()
// 添加与编辑信息回显
const dialogRef = ref(null)
const handleChannelDialog = (row) => {
  if (!row.id) {
    dialogRef.value.open({})
  } else {
    dialogRef.value.open(row)
  }
}
const handleSuccess = (e) => {
  ElMessage.success(e)
  getChannelList()
}

// 删除功能
const handleDelChannel = async (row) => {
  const res = await channelDeleteCateService(row.id)
  handleSuccess(res.message)
}
</script>
<template>
  <div class="article-channel">
    <cart-page title="文章分类">
      <template #header-right>
        <el-button type="primary" @click="handleChannelDialog({})"
          >添加分类</el-button
        >
      </template>
      <template #default>
        <el-table
          :data="channelList"
          style="width: 100%"
          height="100%"
          :row-style="{ height: '50px' }"
          stripe
          v-loading="loading"
        >
          <el-table-column
            label="序号"
            type="index"
            width="150px"
          ></el-table-column>
          <el-table-column label="分类名称" prop="cate_name"></el-table-column>
          <el-table-column label="分类别名" prop="cate_alias"></el-table-column>
          <el-table-column label="操作" width="150px">
            <template #default="{ row }">
              <el-button
                plain
                circle
                type="primary"
                :icon="Edit"
                @click="handleChannelDialog(row)"
              >
              </el-button>
              <el-button
                plain
                circle
                type="danger"
                :icon="Delete"
                @click="handleDelChannel(row)"
              ></el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="无数据"></el-empty>
          </template>
        </el-table>
      </template>
    </cart-page>
    <channel-dialog
      ref="dialogRef"
      @submit-message="handleSuccess($event)"
    ></channel-dialog>
  </div>
</template>
<style lang="scss" scoped>
.article-channel {
  height: 100%;
}
</style>
